<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>vue学习使用</title>
	<script src="./js/vue.js"></script>
</head>

<body>
<div id="app">
	<!--	动态组件 component 标签完成对应的切换显示 -->
	<div>
		<button @click="cmp='login'">登录</button>
		<button @click="cmp='reg'">注册</button>
	</div>
	<hr>
	<!--	动态组件 动态的根据data中的数据来完成，对应名称的组件的调用显示 -->
	<!--	缓存组件 -->
<!--
include	它是一个数组，元素中对应的组件的name名称，写在此数组中，要进行缓存
exclude 它是一个数组，元素中对应的组件的name名称，写在此数组中，不进行缓存
-->
	<!--	<keep-alive :include="['login']">-->
	<keep-alive :exclude="['login']">
		<component :is="cmp"></component>
	</keep-alive>

</div>

<script>
  const reg = {
    name: 'reg',
    data() {
      return {
        username: ''
      }
    },
    template: `
			<div>
				<h3>注册</h3>
				<hr>
				<input type="text" v-model="username" placeholder="账号">
			</div>
		`,
    created() {
      console.log('reg --- created')
    },
    activated() {
      console.log('reg --- activated')
    },
    deactivated() {
      console.log('reg --- deactivated')
    }
  }
  const login = {
    name: 'login',
    data() {
      return {
        username: ''
      }
    },
    template: `
			<div>
				<h3>登录</h3>
				<hr>
				<input type="text" v-model="username" placeholder="账号">
			</div>
		`,
    created() {
      console.log('login --- created')
    },
    activated() {
      console.log('login --- activated')
    },
    deactivated() {
      console.log('login --- deactivated')
    }
  }

  const vm = new Vue({
    el: '#app',
    components: {
      reg, login
    },
    data: {
      // cmp它是的值 ，作为动态组件中的is属性所用，所以它的值只能是components配置中的属性
      cmp: 'reg'
    }
  })
</script>

</body>

</html>
